<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6" v-if="authUser">
          <el-form-item label="油企名称" prop="enterpriseId" size="small">
            <el-select
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择油企"
              style="width: 190px"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="$store.state.user.userLevel != 2">
          <el-form-item
            label="油站名称"
            prop="stationId"
            clearable
            size="small"
          >
            <el-select
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择油站"
              style="width: 190px"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卡号" prop="physicalCardNo">
            <el-input
              v-model="queryParams.physicalCardNo"
              placeholder="请输入卡号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号" prop="userPhone">
            <el-input
              v-model="queryParams.userPhone"
              placeholder="请输入手机号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="!authUser">
          <el-form-item label="时间">
            <el-date-picker
              style="width: 190px"
              v-model="dateRangeCreatedDate"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="$store.state.user.userLevel == 2">
          <el-form-item label="状态" prop="cardStatus">
            <el-select
              v-model="queryParams.cardStatus"
              placeholder="请选择状态"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option
                v-for="(item, index) in cardStatusTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="collapse">
        <el-col :span="6">
          <el-form-item label="卡名称" prop="physicalCardName">
            <el-input
              v-model="queryParams.physicalCardName"
              placeholder="请输入订单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="持卡人" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入持卡人"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业名称" prop="userCompany">
            <el-input
              v-model="queryParams.userCompany"
              placeholder="请输入企业名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="$store.state.user.userLevel != 2">
          <el-form-item label="状态" prop="cardStatus">
            <el-select
              v-model="queryParams.cardStatus"
              placeholder="请选择状态"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option
                v-for="(item, index) in cardStatusTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="collapse">
        <el-col :span="6" v-if="authUser">
          <el-form-item label="时间">
            <el-date-picker
              style="width: 190px"
              v-model="dateRangeCreatedDate"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          type="primary"
          plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          size="mini"
          @click="
            () => {
              collapse = !collapse;
            }
          "
        >
          {{ collapse ? "收起" : "展开更多" }}
          <i :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"></i>
        </el-button>
      </el-col>
      <el-col :span="1.5" v-if="authUser">
        <el-button size="mini" @click="cardReading" type="primary"
          >读卡</el-button
        >
      </el-col>
      <el-col :span="1.5" v-if="authUser">
        <el-button size="mini" @click="handleRecharge" plain>充值</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" @click="handleConsume" plain>消费</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
                <el-button size="mini" @click="handleColdCard" :disabled="isSelectAll ? false : true"
                    :class="isSelectAll ? 'cold_active' : 'cold_btn'">冻结</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button size="mini" :disabled="isSelectAll ? false : true"
                    :class="isSelectAll ? ' destroy_active' : 'destroy_btn'" @click="handleDestroyed">注销</el-button>
            </el-col> -->
    </el-row>

    <el-table :data="cardList" stripe @select="select" @select-all="selectAll">
      <el-table-column type="selection" width="55" align="left" />
      <el-table-column
        v-if="authUser"
        label="油企名称"
        align="left"
        prop="enterpriseName"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        label="油站名称"
        align="left"
        prop="stationName"
        width="140"
        show-overflow-tooltip
      />
      <el-table-column
        label="卡号"
        align="left"
        prop="physicalCardNo"
        width="140"
        show-overflow-tooltip
      />
      <el-table-column
        label="持卡人"
        align="left"
        prop="userName"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        label="手机号"
        align="left"
        prop="userPhone"
        width="180"
      />
      <el-table-column
        label="面额(元)"
        align="left"
        prop="physicalCardAmount"
        width="180"
      />
      <el-table-column
        label="企业名称"
        align="left"
        prop="userCompany"
        width="140"
        show-overflow-tooltip
      />
      <el-table-column
        label="状态"
        align="left"
        prop="cardStatus"
        width="120"
        :formatter="cardStatusFormatter"
      />
      <el-table-column
        label="开卡时间"
        align="left"
        prop="createTime"
        width="180"
        sortable
      />
      <el-table-column
        label="最后操作时间"
        align="left"
        prop="updateTime"
        width="180"
      />
      <el-table-column
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="80"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleView(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button size="mini" type="text" @click="handleSignOut(scope.row)"
            >注销</el-button
          >
          <!-- <el-button size="mini" type="text" @click="handleCopy(scope.$index, scope.row)">复制模版</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="fr"
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <cardListForm ref="cardListFormRef" :parm="params" @getData="getData" />
  </div>
</template>
<script>
import {
  physicalCardList,
  physicalCardUpdateStatus,
  physicalCardGet,
  physicalCardCreateNo,
  signOut,
} from "@/api/ic/info";
import { listEnterpriseStation } from "@/api/dept";
import { enterpriseList } from "@/api/station/order";
import RFIDReader from "./util/RFIDReader";
import ReaderFunction from "./util/ReaderFunction";
import cardListForm from "./cardList-form.vue";
export default {
  name: "cardRecord",
  components: { cardListForm },
  data() {
    return {
      // 折叠开关
      collapse: false,
      cardListDialog: false,
      title: "",
      cardListForm: {},
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 卡编号表格数据
      infoList: [],
      statistics: null,
      // 是否显示弹出层
      openPay: false,
      // 是否弹出充值密码
      openPasswd: false,
      cardStatusTypeList: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "冻结",
        },
        {
          value: "1",
          label: "注销",
        },
      ],
      // 查询参数
      queryParams: {
        stationId: null,
        enterpriseId: null,
      },
      // 表单参数
      form: {},
      // 查看
      viewForm: {
        viewFlag: false,
        prisename: "",
        stationname: "",
        cardPeople: "",
        phoneNumber: "",
        orderNo: "",
        orderType: "",
        orderPay: "",
        price: "",
        secret: "",
        cardNo: 0,
        enterprise: "",
        cardName: "",
      },
      // 表单校验
      rules: {},
      isSelectAll: false,
      cardList: [], // 实体卡列表
      page: 1,
      pageSize: 10,
      total: 0,
      selectedRow: [], // 选中的数据
      enterpriseList: [],
      stationList: [],
      dateRangeCreatedDate: [],
      options: [],
      params: {},
      cardData: {
        device: 0,
        blockNumber: 1,
        scretKey: "FFFFFFFFFFFF",
        scretVal: "000000000000ff078069ffffffffffff",
      },
    };
  },
  created() {
    this.getEnterpriseList();
    // 如果当前是油企账号，则获取该企业下的油站
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      this.getStationList(this.presentEnterprise.enterpriseId);
    }
    this.getData();
  },
  methods: {
    // 注销
    async handleSignOut(row) {
      console.log(row, "注销physicalCardNo");
      await this.$confirm(`您确认要注销实体卡“${row.physicalCardNo}”`);
      const res = await signOut([
        {
          physicalCardNo: row.physicalCardNo,
          cardStatus: "2",
        },
      ]);
      if (res && res.code == 200) {
        this.$message.success(res.msg);
      }
      this.getData();
    },
    handleQuery() {
      this.getData();
    },
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.dateRangeCreatedDate = [];
      this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
    getData() {
      if (this.loading) return;
      this.loading = true;
      let queryData = this.getQueryData(this.queryParams);
      this.addDateRange(queryData, this.dateRangeCreatedDate);
      queryData = Object.assign(
        {
          pageNum: this.page,
          pageSize: this.pageSize,
        },
        queryData
      );
      physicalCardList(queryData).then((res) => {
        if (res && res.code === 200) {
          this.cardList = res.rows;
          this.total = res.total;
        } else {
          this.cardList = [];
          this.total = 0;
        }
      });
      this.loading = false;
    },
    getQueryData(data) {
      let queryData = data;
      Object.keys(queryData).forEach((key) => {
        if (queryData[key] === "" || queryData[key] === undefined) {
          queryData[key] = null;
        }
      });
      return queryData;
    },
    // 根据油企获取油站
    handleSelectChange(value) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    getStationList(val) {
      listEnterpriseStation({ enterpriseId: val }).then((res) => {
        this.stationList = res;
      });
    },
    cardStatusFormatter(row) {
      let types = {
        0: "正常",
        1: "冻结",
        2: "注销",
      };
      return types[row.cardStatus];
    },
    select(selection, row) {
      if (selection.length == 0) {
        this.isSelectAll = false;
      } else {
        this.isSelectAll = true;
        this.selectedRow = selection;
      }
    },
    selectAll(val) {
      if (val.length == 0) {
        this.isSelectAll = false;
      } else {
        this.isSelectAll = true;
        this.selectedRow = val;
      }
    },
    // 充值
    async handleRecharge() {
      let _this = this;
      ReaderFunction.OpenDevice(0, function (res) {
        if (res.data.device_id == -1) {
          _this.$message.error("未连接设备");
        } else {
          ReaderFunction.TyA_GetUID(0, function (result) {
            if (result.data.snr) {
              RFIDReader.Sys_SetBuzzer(RFIDReader.device_id, 20, null);
              const { snr } = result.data;
              // 进入默认初始密钥
              ReaderFunction.TyA_CS_Read2(
                parseInt(_this.cardData.device),
                _this.cardData.blockNumber,
                _this.cardData.scretKey,
                async function (result2) {
                  console.log(result2);
                  if (result2.retval == 0) {
                    let res = await physicalCardCreateNo();
                    console.log(res);
                    let cardListForm = Object.assign(res.data, {
                      stationId: null,
                      enterpriseId: null,
                      oilGun: null,
                      oilPersonnelId: null,
                    });

                    console.log(result2.data.value);
                    let physicalCardNo = ReaderFunction.hexToString(
                      result2.data.value
                    );
                    console.log(physicalCardNo);
                    let physicalCardGetRes = await physicalCardGet({
                      physicalCardNo: physicalCardNo,
                    });
                    console.log(physicalCardGetRes);
                    // 有值不是空卡请求接口判断是否陌生卡
                    if (physicalCardGetRes && physicalCardGetRes.data) {
                      cardListForm = Object.assign(physicalCardGetRes.data, {
                        oilGun: null,
                        oilPersonnelId: null,
                      });
                      cardListForm.stationId =
                        cardListForm.stationId.split(",");
                      for (let i = 0; i < cardListForm.stationId.length; i++) {
                        cardListForm.stationId[i] = parseInt(
                          cardListForm.stationId[i]
                        );
                      }
                      _this.params = {
                        drawerType: "recharge",
                        drawerShow: true,
                        cardListForm: cardListForm,
                        isCardReading: true,
                        cardData: Object.assign(_this.cardData, { snr: snr }),
                      };
                    }
                    _this.$nextTick(() => {
                      _this.$refs.cardListFormRef.handleClearValidate();
                    });
                  } else if (result2.retval == 22) {
                    console.log("再次调用");
                    // 密钥失败重新接口获取密钥调用一次
                    let res = await physicalCardCreateNo();
                    console.log(res);
                    let createNoData = res.data;
                    let scretKey16 = ReaderFunction.stringToHex(
                      createNoData.secretKeyA
                    );
                    console.log(scretKey16);
                    ReaderFunction.TyA_CS_Read2(
                      parseInt(_this.cardData.device),
                      _this.cardData.blockNumber,
                      scretKey16,
                      async function (result2) {
                        console.log(result2);
                        if (result2.retval == 0) {
                          let cardListForm = Object.assign(res.data, {
                            stationId: null,
                            enterpriseId: null,
                            oilGun: null,
                            oilPersonnelId: null,
                          });
                          console.log(result2.data.value);
                          let physicalCardNo = ReaderFunction.hexToString(
                            result2.data.value
                          );
                          console.log(physicalCardNo);
                          let physicalCardGetRes = await physicalCardGet({
                            physicalCardNo: physicalCardNo,
                          });
                          console.log(physicalCardGetRes);
                          // 有值不是空卡请求接口判断是否陌生卡
                          if (physicalCardGetRes && physicalCardGetRes.data) {
                            cardListForm = Object.assign(
                              physicalCardGetRes.data,
                              {
                                oilGun: null,
                                oilPersonnelId: null,
                              }
                            );
                            cardListForm.stationId =
                              cardListForm.stationId.split(",");
                            for (
                              let i = 0;
                              i < cardListForm.stationId.length;
                              i++
                            ) {
                              cardListForm.stationId[i] = parseInt(
                                cardListForm.stationId[i]
                              );
                            }
                            _this.params = {
                              drawerType: "recharge",
                              drawerShow: true,
                              cardListForm: cardListForm,
                              isCardReading: true,
                              cardData: Object.assign(_this.cardData, {
                                snr: snr,
                              }),
                            };
                          }
                          _this.$nextTick(() => {
                            _this.$refs.cardListFormRef.handleClearValidate();
                          });
                        } else if (result2.retval == 22) {
                          _this.$message.error("密钥验证失败");
                        }
                      }
                    );
                  }
                }
              );
            } else {
              _this.$message.error("读卡失败，检查是否放置卡");
            }
          });
        }
      });
    },
    // 消费
    async handleConsume() {
      let _this = this;
      ReaderFunction.OpenDevice(0, function (res) {
        if (res.data.device_id == -1) {
          _this.$message.error("未连接设备");
        } else {
          ReaderFunction.TyA_GetUID(0, function (result) {
            if (result.data.snr) {
              RFIDReader.Sys_SetBuzzer(RFIDReader.device_id, 20, null);
              const { snr } = result.data;
              // 进入默认初始密钥
              ReaderFunction.TyA_CS_Read2(
                parseInt(_this.cardData.device),
                _this.cardData.blockNumber,
                _this.cardData.scretKey,
                async function (result2) {
                  console.log(result2);
                  if (result2.retval == 0) {
                    let res = await physicalCardCreateNo();
                    console.log(res);
                    let cardListForm = Object.assign(res.data, {
                      stationId: null,
                      enterpriseId: null,
                      oilGun: null,
                      oilPersonnelId: null,
                    });
                    console.log(result2.data.value);
                    let physicalCardNo = ReaderFunction.hexToString(
                      result2.data.value
                    );
                    console.log(physicalCardNo);
                    let physicalCardGetRes = await physicalCardGet({
                      physicalCardNo: physicalCardNo,
                    });
                    console.log(physicalCardGetRes);
                    // 有值不是空卡请求接口判断是否陌生卡
                    if (physicalCardGetRes && physicalCardGetRes.data) {
                      cardListForm = Object.assign(physicalCardGetRes.data, {
                        oilGun: null,
                        oilPersonnelId: null,
                      });
                      cardListForm.stationId =
                        cardListForm.stationId.split(",");
                      for (let i = 0; i < cardListForm.stationId.length; i++) {
                        cardListForm.stationId[i] = parseInt(
                          cardListForm.stationId[i]
                        );
                      }
                      _this.params = {
                        drawerType: "consume",
                        drawerShow: true,
                        cardListForm: cardListForm,
                        isCardReading: true,
                        cardData: Object.assign(_this.cardData, { snr: snr }),
                      };
                    }
                    _this.$nextTick(() => {
                      _this.$refs.cardListFormRef.handleClearValidate();
                    });
                  } else if (result2.retval == 22) {
                    console.log("再次调用");
                    // 密钥失败重新接口获取密钥调用一次
                    let res = await physicalCardCreateNo();
                    console.log(res);
                    let createNoData = res.data;
                    let scretKey16 = ReaderFunction.stringToHex(
                      createNoData.secretKeyA
                    );
                    console.log(scretKey16);
                    ReaderFunction.TyA_CS_Read2(
                      parseInt(_this.cardData.device),
                      _this.cardData.blockNumber,
                      scretKey16,
                      async function (result2) {
                        console.log(result2);
                        if (result2.retval == 0) {
                          let cardListForm = Object.assign(res.data, {
                            stationId: null,
                            enterpriseId: null,
                            oilGun: null,
                            oilPersonnelId: null,
                          });
                          console.log(cardListForm);
                          console.log(result2.data.value);
                          let physicalCardNo = ReaderFunction.hexToString(
                            result2.data.value
                          );
                          console.log(physicalCardNo);
                          let physicalCardGetRes = await physicalCardGet({
                            physicalCardNo: physicalCardNo,
                          });
                          console.log(physicalCardGetRes);
                          // 有值不是空卡请求接口判断是否陌生卡
                          if (physicalCardGetRes && physicalCardGetRes.data) {
                            cardListForm = Object.assign(
                              physicalCardGetRes.data,
                              {
                                oilGun: null,
                                oilPersonnelId: null,
                              }
                            );
                            cardListForm.stationId =
                              cardListForm.stationId.split(",");
                            for (
                              let i = 0;
                              i < cardListForm.stationId.length;
                              i++
                            ) {
                              cardListForm.stationId[i] = parseInt(
                                cardListForm.stationId[i]
                              );
                            }
                            _this.params = {
                              drawerType: "consume",
                              drawerShow: true,
                              cardListForm: cardListForm,
                              isCardReading: true,
                              cardData: Object.assign(_this.cardData, {
                                snr: snr,
                              }),
                            };
                            console.log(_this.params);
                          }
                          _this.$nextTick(() => {
                            _this.$refs.cardListFormRef.handleClearValidate();
                          });
                        } else if (result2.retval == 22) {
                          _this.$message.error("密钥验证失败");
                        }
                      }
                    );
                  }
                }
              );
            } else {
              _this.$message.error("读卡失败，检查是否放置卡");
            }
          });
        }
      });
    },
    // 冻结
    handleColdCard() {
      this.$confirm(`确认冻结勾选的实体卡吗？`).then(() => {
        console.log(this.selectedRow);
        let physicalCardList = this.selectedRow.map((item) => {
          return {
            physicalCardNo: item.physicalCardNo,
            cardStatus: (item.cardStatus = 1),
          };
        });
        this.operatePhysicalCardUpdateStatus(physicalCardList);
      });
    },
    // 注销
    handleDestroyed() {
      this.$confirm(`确认注销勾选的实体卡吗？`).then(() => {
        console.log(this.selectedRow);
        let physicalCardList = this.selectedRow.map((item) => {
          return {
            physicalCardNo: item.physicalCardNo,
            cardStatus: (item.cardStatus = 2),
          };
        });
        this.operatePhysicalCardUpdateStatus(physicalCardList);
      });
    },
    operatePhysicalCardUpdateStatus(physicalCardList) {
      physicalCardUpdateStatus(physicalCardList).then((res) => {
        if (res && res.code === 200) {
          this.$message.success(res.msg);
          this.pageNum = 1;
          this.getData();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 读卡
    cardReading() {
      let _this = this;
      ReaderFunction.OpenDevice(0, function (res) {
        if (res.data.device_id == -1) {
          _this.$message.error("未连接设备");
        } else {
          ReaderFunction.TyA_GetUID(0, function (result) {
            if (result.data.snr) {
              RFIDReader.Sys_SetBuzzer(RFIDReader.device_id, 20, null);
              const { snr } = result.data;
              // 进入默认初始密钥
              ReaderFunction.TyA_CS_Read2(
                parseInt(_this.cardData.device),
                _this.cardData.blockNumber,
                _this.cardData.scretKey,
                async function (result2) {
                  console.log(result2);
                  if (result2.retval == 0) {
                    let res = await physicalCardCreateNo();
                    console.log(res);
                    let cardListForm = Object.assign(res.data, {
                      stationId: null,
                      enterpriseId: null,
                      oilGun: null,
                      oilPersonnelId: null,
                    });

                    console.log(result2.data.value);
                    let physicalCardNo = ReaderFunction.hexToString(
                      result2.data.value
                    );
                    console.log(physicalCardNo);
                    let physicalCardGetRes = await physicalCardGet({
                      physicalCardNo: physicalCardNo,
                    });
                    console.log(physicalCardGetRes);
                    // 有值不是空卡请求接口判断是否陌生卡
                    if (physicalCardGetRes && physicalCardGetRes.data) {
                      cardListForm = Object.assign(physicalCardGetRes.data, {
                        oilGun: null,
                        oilPersonnelId: null,
                      });
                      cardListForm.stationId =
                        cardListForm.stationId.split(",");
                      for (let i = 0; i < cardListForm.stationId.length; i++) {
                        cardListForm.stationId[i] = parseInt(
                          cardListForm.stationId[i]
                        );
                      }
                      _this.params = {
                        drawerType: "edit",
                        drawerShow: true,
                        cardListForm: cardListForm,
                        isCardReading: true,
                        cardData: Object.assign(_this.cardData, { snr: snr }),
                      };
                    } else {
                      _this.params = {
                        drawerType: "add",
                        drawerShow: true,
                        cardListForm: cardListForm,
                        isCardReading: true,
                        cardData: Object.assign(_this.cardData, { snr: snr }),
                      };
                    }
                    _this.$nextTick(() => {
                      _this.$refs.cardListFormRef.handleClearValidate();
                    });
                  } else if (result2.retval == 22) {
                    console.log("再次调用");
                    // 密钥失败重新接口获取密钥调用一次
                    let res = await physicalCardCreateNo();
                    console.log(res);
                    let createNoData = res.data;
                    let scretKey16 = ReaderFunction.stringToHex(
                      createNoData.secretKeyA
                    );
                    console.log(scretKey16);
                    ReaderFunction.TyA_CS_Read2(
                      parseInt(_this.cardData.device),
                      _this.cardData.blockNumber,
                      scretKey16,
                      async function (result2) {
                        console.log(result2);
                        if (result2.retval == 0) {
                          let cardListForm = Object.assign(res.data, {
                            stationId: null,
                            enterpriseId: null,
                            oilGun: null,
                            oilPersonnelId: null,
                          });
                          console.log(result2.data.value);
                          let physicalCardNo = ReaderFunction.hexToString(
                            result2.data.value
                          );
                          console.log(physicalCardNo);
                          let physicalCardGetRes = await physicalCardGet({
                            physicalCardNo: physicalCardNo,
                          });
                          console.log(physicalCardGetRes);
                          // 有值不是空卡请求接口判断是否陌生卡
                          if (physicalCardGetRes && physicalCardGetRes.data) {
                            cardListForm = Object.assign(
                              physicalCardGetRes.data,
                              {
                                oilGun: null,
                                oilPersonnelId: null,
                              }
                            );
                            cardListForm.stationId =
                              cardListForm.stationId.split(",");
                            for (
                              let i = 0;
                              i < cardListForm.stationId.length;
                              i++
                            ) {
                              cardListForm.stationId[i] = parseInt(
                                cardListForm.stationId[i]
                              );
                            }
                            _this.params = {
                              drawerType: "edit",
                              drawerShow: true,
                              cardListForm: cardListForm,
                              isCardReading: true,
                              cardData: Object.assign(_this.cardData, {
                                snr: snr,
                              }),
                            };
                          } else {
                            _this.params = {
                              drawerType: "add",
                              drawerShow: true,
                              cardListForm: cardListForm,
                              isCardReading: true,
                              cardData: Object.assign(_this.cardData, {
                                snr: snr,
                              }),
                            };
                          }
                          _this.$nextTick(() => {
                            _this.$refs.cardListFormRef.handleClearValidate();
                          });
                        } else if (result2.retval == 22) {
                          _this.$message.error("密钥验证失败");
                        }
                      }
                    );
                  }
                }
              );
            } else {
              _this.$message.error("读卡失败，检查是否放置卡");
            }
          });
        }
      });
    },
    // 赋值模版
    handleCopy() {},
    //查看
    async handleView(id, row) {
      console.log(row);
      let res = await physicalCardGet({ physicalCardNo: row.physicalCardNo });
      console.log(res);
      if (res.data) {
        let data = res.data;
        data.stationId = data.stationId.split(",");
        for (let i = 0; i < data.stationId.length; i++) {
          data.stationId[i] = parseInt(data.stationId[i]);
        }
        this.params = {
          drawerType: "view",
          drawerShow: true,
          cardListForm: data,
          isCardReading: false,
        };
      } else {
        this.params = {
          drawerType: "view",
          drawerShow: true,
          cardListForm: {},
          isCardReading: false,
        };
      }
      this.$nextTick(() => {
        this.$refs.cardListFormRef.handleClearValidate();
      });
    },
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.flex-statu {
  display: flex;
  align-items: center;
}

.title_line {
  position: relative;
  font-size: 23px;
  margin-left: 30px;
}

.card-item {
  margin-left: 50px;
}

.title_line::after {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  width: 5px;
  top: 6px;
  left: -10px;
  background-color: rgba(242, 131, 0, 1);
}

.drawer__footer {
  text-align: end;
}

::v-deep .add-drawer {
  overflow-y: auto;
}

::v-deep .cold_btn {
  background-color: rgba(170, 170, 170, 0.5) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_btn {
  background-color: rgba(217, 0, 27, 0.5) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_active {
  background-color: rgba(217, 0, 27, 1) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .cold_active {
  background-color: rgba(170, 170, 170, 1) !important;
  color: #fff !important;
  border: none !important;
}

::v-deep .destroy_btn:hover {
}
</style>
